<script setup lang="ts">
// import { watch } from 'vue'
import { useScrollEvent } from '@/utils/hooks/scrollEvent'

const { docTopSide } = useScrollEvent()

// watch(docTopSide, (val) => {
//   // 目前仅做下滑改变，不绑定动画，真没时间
// })
</script>
<template>
  <div :class="{
    'top-nav-with-hidden': true,
    'flex_ac_jsb': true,
    'bg-w': docTopSide
  }">
    <div class="left">
      <van-icon
        :class="docTopSide ? '' : 'mask_tip_content'"
        @click="$router.back()"
        name="arrow-left" />
    </div>
    <div class="center" v-show="docTopSide">
      <slot />
    </div>
    <div class="right">
      <van-icon
        :class="docTopSide ? '' : 'mask_tip_content'"
        name="ellipsis" />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.bg-w {
  background: var(--vt-c-white);
}
.top-nav-with-hidden {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 20;
  // background: #fff;
  height: 92px; // 46*2
  .left {
    padding-left: 32px;
  }
  .right {
    padding-right: 32px;
  }
  .left i, .right i {
    padding: 7px;
    border-radius: 50%;
    font-size: 35px;
  }
  .center {
    // flex: 1;
    // width: 300px;
  }
}
</style>